<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计划变更</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
    }

    body {
      background: linear-gradient(135deg, #F5F7FA 0%, #E8F4FD 100%);
      color: #333333;
      min-height: 100vh;
      line-height: 1.6;
    }

    /* 顶部导航栏 */
    .header {
      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
      color: white;
      padding: 20px;
      position: relative;
      min-height: 80px;
      display: flex;
      align-items: center;
      box-shadow: 0 4px 20px rgba(33, 150, 243, 0.3);
    }

    .back-btn {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
    }

    .back-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateY(-50%) scale(1.1);
    }

    .header-title {
      font-size: 20px;
      font-weight: 600;
      text-align: center;
      flex: 1;
      letter-spacing: 0.5px;
    }

    /* 内容区域 */
    .content-container {
      background-color: white;
      margin: 20px 0;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }

    /* 表单区域 */
    .form-container {
      padding: 25px;
    }

    /* 安全警报功能介绍 */
    .safety-alert-section {
      margin-bottom: 30px;
      padding-bottom: 25px;
      border-bottom: 1px solid #F0F0F0;
    }

    .safety-title {
      font-size: 20px;
      font-weight: 600;
      color: #333;
      margin-bottom: 20px;
      letter-spacing: 0.5px;
      position: relative;
      padding-left: 15px;
    }

    .safety-title::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 20px;
      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
      border-radius: 2px;
    }

    .safety-description {
      font-size: 16px;
      color: #666;
      margin-bottom: 25px;
      line-height: 1.6;
      text-align: center;
    }

    .safety-subtitle {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin-bottom: 15px;
    }

    .safety-text {
      font-size: 14px;
      color: #666;
      margin-bottom: 15px;
      line-height: 1.6;
    }

    /* 按钮组 */
    .button-group {
      display: flex;
      background-color: #F5F5F5;
      border-radius: 25px;
      padding: 4px;
      margin-top: 25px;
      position: relative;
    }

    .btn-dont-use {
      flex: 1;
      padding: 15px 20px;
      background-color: transparent;
      color: #666;
      border: none;
      border-radius: 20px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      z-index: 1;
    }

    .btn-dont-use.active {
      background-color: #333;
      color: white;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .btn-use {
      flex: 1;
      padding: 15px 20px;
      background-color: transparent;
      color: #666;
      border: none;
      border-radius: 20px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      z-index: 1;
    }

    .btn-use.active {
      background-color: #333;
      color: white;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    /* 信息公开设置 */
    .disclosure-section {
      margin-bottom: 30px;
    }

    .disclosure-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin-bottom: 12px;
      letter-spacing: 0.5px;
    }

    .disclosure-description {
      font-size: 14px;
      color: #666;
      margin-bottom: 20px;
      line-height: 1.5;
    }

    /* 单选按钮组 */
    .radio-group {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .radio-option {
      display: flex;
      align-items: center;
      padding: 20px;
      border: 2px solid #E0E0E0;
      border-radius: 12px;
      background-color: #FAFAFA;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
    }

    .radio-option:hover {
      border-color: #B0B0B0;
      background-color: #F5F5F5;
    }

    .radio-option.selected {
      border-color: #2196F3;
      background-color: rgba(33, 150, 243, 0.05);
    }

    .radio-input {
      margin-right: 15px;
      width: 20px;
      height: 20px;
      border: 2px solid #E0E0E0;
      border-radius: 50%;
      background-color: white;
      position: relative;
      flex-shrink: 0;
    }

    .radio-input::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #2196F3;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .radio-option.selected .radio-input::after {
      opacity: 1;
    }

    .radio-text {
      flex: 1;
      font-size: 16px;
      color: #333;
      line-height: 1.5;
    }

    /* 动态内容区域 */
    .dynamic-content {
      margin-top: 20px;
      padding: 20px;
      background-color: #F8F9FA;
      border-radius: 12px;
      border-left: 4px solid #2196F3;
    }

    .content-text {
      font-size: 14px;
      color: #666;
      line-height: 1.6;
    }

    /* 底部按钮 */
    .action-buttons {
      display: flex;
      gap: 15px;
      margin-top: 25px;
    }

    .btn-inquire {
      flex: 1;
      padding: 15px 20px;
      background-color: white;
      color: #2196F3;
      border: 2px solid #2196F3;
      border-radius: 25px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .btn-inquire:hover {
      background-color: #2196F3;
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
    }

    .btn-contract {
      flex: 1;
      padding: 15px 20px;
      background-color: #2196F3;
      color: white;
      border: none;
      border-radius: 25px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .btn-contract:hover {
      background-color: #1976D2;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
    }

    /* 底部说明 */
    .footer-note {
      background-color: #F5F5F5;
      padding: 20px;
      margin: 20px -25px -25px;
      border-top: 1px solid #E0E0E0;
    }

    .footer-text {
      font-size: 14px;
      color: #666;
      line-height: 1.6;
      text-align: center;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .header {
        padding: 15px;
        min-height: 70px;
      }

      .header-title {
        font-size: 18px;
      }

      .content-container {
        margin: 15px 0;
      }

      .form-container {
        padding: 20px;
      }

      .safety-title {
        font-size: 18px;
        margin-bottom: 15px;
      }

      .safety-description {
        font-size: 15px;
        margin-bottom: 20px;
      }

      .safety-subtitle {
        font-size: 16px;
      }

      .safety-text {
        font-size: 13px;
      }

      .button-group {
        padding: 3px;
      }

      .btn-dont-use,
      .btn-use {
        padding: 18px 20px;
        font-size: 15px;
      }

      .radio-option {
        padding: 15px;
      }

      .radio-text {
        font-size: 15px;
      }

      .footer-note {
        margin: 20px -20px -20px;
        padding: 15px;
      }

      .footer-text {
        font-size: 13px;
      }

      .action-buttons {
        flex-direction: column;
        gap: 12px;
      }

      .btn-inquire,
      .btn-contract {
        padding: 18px 20px;
        font-size: 15px;
      }

      .dynamic-content {
        padding: 15px;
      }

      .content-text {
        font-size: 13px;
      }
    }
  </style>
</head>

<body>
  <!-- 顶部导航栏 -->
  <div class="header">
    <button class="back-btn" id="backBtn">
      ←
    </button>
    <div class="header-title">计划变更</div>
  </div>

  <!-- 内容区域 -->
  <div class="content-container">
    <div class="form-container">
      <!-- 安全警报功能 -->
      <div class="safety-alert-section">
        <div class="safety-title">安全警报功能</div>

        <div class="safety-description">
          为了应对紧急情况<br>
          请使用安全警报功能
        </div>

        <div class="safety-subtitle">什么是安全警报功能</div>

        <div class="safety-text">
          安全警报功能使用智能手机的陀螺仪传感器进行安全确认。
        </div>

        <div class="safety-text">
          在紧急情况下（如因突发疾病等原因失去意识），如果智能手机在选定时间内（24小时、36小时或48小时）没有检测到振动，运营公司"Good Service"将收到通知。
        </div>

        <div class="safety-text">
          完全不使用GPS，不会泄露位置信息或其他隐私数据，请放心使用。
        </div>

        <div class="safety-text">
          如果智能手机电池电量耗尽超过24小时，或者超出信号范围，运营公司将收到通知。通知后24小时，运营公司将联系用户进行确认。
        </div>

        <div class="safety-text">
          对于Android设备，某些型号可能不支持警报传感器，在这种情况下，公司可能会联系用户。
        </div>

        <div class="safety-subtitle">安全警报的应对</div>

        <div class="safety-text">
          运营公司"Good Service"在收到警报后，将首先尝试通过电话确认用户的安全。
        </div>

        <div class="safety-text">
          如果无法通过电话与用户确认，将联系注册的紧急联系人，告知智能手机完全静止且无法联系到用户。
        </div>

        <div class="safety-text">
          根据情况，也可能联系当地相关部门。
        </div>

        <div class="button-group">
          <button class="btn-dont-use" id="dontUseBtn">不使用</button>
          <button class="btn-use" id="useBtn">使用</button>
        </div>
      </div>

      <!-- 信息公开设置 -->
      <div class="disclosure-section">
        <div class="disclosure-title">关于输入信息的公开</div>
        <div class="disclosure-description">根据需要，可以将您的信息共享给您的亲属。</div>

        <div class="radio-group">
          <div class="radio-option selected" data-value="all">
            <div class="radio-input"></div>
            <div class="radio-text">向家人公开所有信息</div>
          </div>

          <div class="radio-option" data-value="partial">
            <div class="radio-input"></div>
            <div class="radio-text">向家人公开部分信息</div>
          </div>

          <div class="radio-option" data-value="none">
            <div class="radio-input"></div>
            <div class="radio-text">不向家人公开信息</div>
          </div>
        </div>

        <!-- 动态内容区域 -->
        <div class="dynamic-content" id="dynamicContent">
          <div class="content-text">
            您输入的信息在单独系统中管理，如有事先合同，运营公司将在紧急情况下处理合同解除等事宜。如果法定继承人是家庭成员，无论个人意愿如何，都有可能披露信息管理，请利用法律服务。
          </div>
        </div>

        <!-- 底部按钮 -->
        <div class="action-buttons">
          <button class="btn-inquire" id="inquireBtn">咨询</button>
          <button class="btn-contract" id="contractBtn">查看死后事务委托合同</button>
        </div>
      </div>
    </div>

  </div>

  <script>
    // 返回按钮点击事件
    document.getElementById('backBtn').addEventListener('click', function () {
      window.location.href = '主页.html';
    });

    // 不同选项对应的内容和样式
    const contentData = {
      'all': {
        content: '如果发生意外，您的家人（亲属）可以查看并共享您的手机信息。',
        showDynamicContent: true,
        showButtons: false
      },
      'partial': {
        content: '如果发生意外，您基本上会将所有事务委托给家人（亲属），但对于某些特定契约，您可能不希望家人知道，希望提前进行合同解除等外部委托。本服务可以根据您的希望处理各种事务，包括持续契约的解约等详细的事务处理。根据订阅等合同解除的内容，也可以仅处理简单的合同。您可以在家人了解持续契约等信息之前完成希望的事务手续。',
        showDynamicContent: true,
        showButtons: true
      },
      'none': {
        content: '您输入的信息在单独系统中管理，如有事先合同，运营公司将在紧急情况下处理合同解除等事宜。如果法定继承人是家庭成员，无论个人意愿如何，都有可能披露信息管理，请利用法律服务。',
        showDynamicContent: true,
        showButtons: true
      }
    };

    // 单选按钮功能
    document.querySelectorAll('.radio-option').forEach(option => {
      option.addEventListener('click', function () {
        document.querySelectorAll('.radio-option').forEach(opt => opt.classList.remove('selected'));
        this.classList.add('selected');

        const value = this.getAttribute('data-value');
        const dynamicContent = document.getElementById('dynamicContent');
        const contentText = dynamicContent.querySelector('.content-text');
        const actionButtons = document.querySelector('.action-buttons');

        const data = contentData[value];

        // 更新动态内容
        if (data.showDynamicContent) {
          contentText.textContent = data.content;
          dynamicContent.style.display = 'block';
        } else {
          dynamicContent.style.display = 'none';
        }

        // 显示/隐藏底部按钮
        if (data.showButtons) {
          actionButtons.style.display = 'flex';
        } else {
          actionButtons.style.display = 'none';
        }

        console.log('选择的信息公开级别:', value);
      });
    });

    // 使用/不使用按钮功能
    document.getElementById('dontUseBtn').addEventListener('click', function () {
      // 移除其他按钮的active类
      document.getElementById('useBtn').classList.remove('active');
      // 添加当前按钮的active类
      this.classList.add('active');
      alert('已选择不使用安全警报功能');
    });

    document.getElementById('useBtn').addEventListener('click', function () {
      // 移除其他按钮的active类
      document.getElementById('dontUseBtn').classList.remove('active');
      // 添加当前按钮的active类
      this.classList.add('active');
      alert('已选择使用安全警报功能');
    });

    // 底部按钮功能
    document.getElementById('inquireBtn').addEventListener('click', function () {
      alert('咨询功能');
    });

    document.getElementById('contractBtn').addEventListener('click', function () {
      window.location.href = '死后事务委托合同详情页.html';
    });

    // 页面初始化
    document.addEventListener('DOMContentLoaded', function () {
      // 默认选中第一个选项，显示动态内容但不显示按钮
      const dynamicContent = document.getElementById('dynamicContent');
      const contentText = dynamicContent.querySelector('.content-text');
      const actionButtons = document.querySelector('.action-buttons');

      // 设置第一个选项的内容
      contentText.textContent = contentData['all'].content;
      dynamicContent.style.display = 'block';
      actionButtons.style.display = 'none';
    });
  </script>
</body>

</html>